<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 600px;
      margin: 100px auto;
    }

    .message {
      display: inline-block;
      font-size: 12px;
      color: #999;
      background: url(../img/mess.png) no-repeat left center;
      padding-left: 20px;
    }

    .wrong {
      color: red;
      background-image: url(../img/wrong.png);
    }

    .right {
      color: green;
      background-image: url(../img/right.png);
    }
  </style>
</head>
<body>
<div class="register">
  <input type="password" class="ipt">
  <p class="message">请输入6~16位密码</p>
</div>
<script>
  var ipt=document.querySelector('.ipt');
  var message=document.querySelector('.message');
  ipt.onblur=function () {
    if(ipt.value.length>16||ipt.value.length<6){
      message.className='wrong message';
      message.innerHTML='您输入的位数不对要求6~16位';
    }else{
      message.className='message right';
      message.innerHTML='您输入的正确'
    }

  }
</script>
</body>
</html>
